<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>1.匿名插槽$</title>
  <script src="../../js/vue.js"></script>
</head>
<body>
  <!--
  1.什么是插槽?
  默认情况下使用子组件时在子组件中编写的元素是不会被渲染的
  如果子组件中有部分内容是使用时才确定的, 那么我们就可以使用插槽
  插槽就是在子组件中放一个"坑", 以后由父组件来"填"

  1.什么是匿名插槽
  没有名字的插槽, 会利用使用时指定的能容替换整个插槽
  注意点: 如果有多个匿名插槽, 每一个匿名插槽都会被指定的内容替换
          虽然写多个匿名插槽不会报错, 但是在企业开发中推荐只能有一个匿名插槽
  -->
  <!--这里就是MVVM中的View-->

  <div id="app2">
      <father></father>
  </div>


  <template id="father">
    <div>
      <!--需求: 在使用子组件的时候给子组件动态的添加一些内容-->
      <son>
        <!--注意点: 默认情况下是不能在使用子组件的时候, 给子组件动态的添加内容的
                        如果想在使用子组件的时候, 给子组件动态的添加内容, 那么就必须使用插槽-->
        <div>我是插槽内容-div</div>
        <p>我是插槽内容-p</p>
        <button>我是插槽内容-button</button>
      </son>
    </div>
  </template>
  <template id="son">
    <div>
      <div>我是头部</div>
      <!--这里的slot标签就是插槽, 插槽其实就是一个坑
          只要有了这个坑, 那么以后使用者就可以根据自己的需要来填这个坑-->
            <!--注意点: 插槽可以指定默认数据, 如果使用者没有填这个坑, 那么就会显示默认数据
                        如果使用者填了这个坑, 那么就会利用使用者天坑的内容替换整个插槽-->
            <!--注意点: 插槽是可以指定名称的, 默认情况下如果没有指定名称, 我们称之为 匿名插槽-->
            <!--匿名插槽的特点: 有多少个匿名插槽, 填充的数据就会被拷贝几份
                          虽然我们可以指定多个匿名插槽, 但是在企业开发中推荐只写一个匿名插槽-->
      <slot>我是插槽默认内容</slot>
      <div>我是底部</div>
    </div>
  </template>
</body>
<script type="text/javascript">


    Vue.component('father',{
      template:'#father'
    })
    Vue.component('son',{
      template:'#son'
    })

    new Vue({
      el:'#app',
      data: {

      },
      methods: {

      }
    })

    new Vue({
      el:'#app2',
      data: {

      },
      methods: {

      }
    })
</script>
</html>